// 页面切换动画
.page-container {
  position: relative;
  min-height: 100vh;
  
  // 进入动画
  &.page-enter {
    animation: slideIn 0.3s ease-out forwards;
    
    &.page-enter-fade {
      animation: fadeIn 0.3s ease-out forwards;
    }
    
    &.page-enter-zoom {
      animation: zoomIn 0.3s ease-out forwards;
    }
  }
  
  // 退出动画
  &.page-exit {
    animation: slideOut 0.3s ease-out forwards;
    
    &.page-exit-fade {
      animation: fadeOut 0.3s ease-out forwards;
    }
    
    &.page-exit-zoom {
      animation: zoomOut 0.3s ease-out forwards;
    }
    
    &.page-exit-reverse {
      animation: slideOutReverse 0.3s ease-out forwards;
    }
  }
}

// 滑动动画
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slideOutReverse {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

// 淡入淡出动画
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

// 缩放动画
@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.9);
    opacity: 0;
  }
} 